<template>
<div id="main">
    <!-- 头部 -->
    <div id="title" v-html="title"></div>
    <div id="symbol">
        <!-- 英式发音 -->
        <svg v-if="symbolA.src" t="1634803986853" @click="audioPlay(1)" class="icon" viewBox="0 0 1164 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1191" width="24" height="32">
            <path d="M965.818182 0C985.111273 0 1000.727273 15.639273 1000.727273 34.909091c0 0 162.909091 151.272727 162.909091 477.090909s-162.909091 477.090909-162.909091 477.090909c0 19.293091-15.616 34.909091-34.909091 34.909091S930.909091 1008.384 930.909091 989.090909c0 0 162.909091-151.272727 162.909091-477.090909S930.909091 34.909091 930.909091 34.909091C930.909091 15.639273 946.525091 0 965.818182 0z" p-id="1192" fill="#1296db"></path>
            <path d="M640 279.272727c19.293091 0 34.909091 15.639273 34.909091 34.909091 0 0 69.818182 46.545455 69.818182 197.818182s-69.818182 197.818182-69.818182 197.818182c0 19.269818-15.616 34.909091-34.909091 34.909091S605.090909 729.088 605.090909 709.818182c0 0 69.818182-46.545455 69.818182-197.818182s-69.818182-197.818182-69.818182-197.818182C605.090909 294.912 620.706909 279.272727 640 279.272727z" p-id="1193" fill="#1296db"></path>
            <path d="M802.909091 139.636364C822.202182 139.636364 837.818182 155.275636 837.818182 174.545455c0 0 116.363636 104.727273 116.363636 337.454545s-116.363636 337.454545-116.363636 337.454545c0 19.293091-15.616 34.909091-34.909091 34.909091S768 868.747636 768 849.454545c0 0 116.363636-104.727273 116.363636-337.454545S768 174.545455 768 174.545455C768 155.275636 783.616 139.636364 802.909091 139.636364z" p-id="1194" fill="#1296db"></path>
            <path d="M209.454545 674.909091 0 674.909091 0 372.363636l209.454545 0 279.272727-209.454545 0 721.454545L209.454545 674.909091zM442.181818 256l-209.454545 162.909091L46.545455 418.909091l0 209.454545 186.181818 0 209.454545 162.909091L442.181818 256z" p-id="1195" fill="#1296db"></path>
            <path d="M965.818182 0C985.111273 0 1000.727273 15.639273 1000.727273 34.909091c0 0 162.909091 151.272727 162.909091 477.090909s-162.909091 477.090909-162.909091 477.090909c0 19.293091-15.616 34.909091-34.909091 34.909091S930.909091 1008.384 930.909091 989.090909c0 0 162.909091-151.272727 162.909091-477.090909S930.909091 34.909091 930.909091 34.909091C930.909091 15.639273 946.525091 0 965.818182 0z" p-id="1196" fill="#1296db"></path>
        </svg>
        <div class="symbol">
            <div v-html="symbolA.title"></div>
            <!-- <div id="src" ref="audioA">{{symbolA.src}}</div> -->
        </div>
        <!-- 美式发音 -->
        <svg v-if="symbolB.src" t="1634803986853" @click="audioPlay(0)" class="icon" viewBox="0 0 1164 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1191" width="24" height="32">
            <path d="M965.818182 0C985.111273 0 1000.727273 15.639273 1000.727273 34.909091c0 0 162.909091 151.272727 162.909091 477.090909s-162.909091 477.090909-162.909091 477.090909c0 19.293091-15.616 34.909091-34.909091 34.909091S930.909091 1008.384 930.909091 989.090909c0 0 162.909091-151.272727 162.909091-477.090909S930.909091 34.909091 930.909091 34.909091C930.909091 15.639273 946.525091 0 965.818182 0z" p-id="1192" fill="#1296db"></path>
            <path d="M640 279.272727c19.293091 0 34.909091 15.639273 34.909091 34.909091 0 0 69.818182 46.545455 69.818182 197.818182s-69.818182 197.818182-69.818182 197.818182c0 19.269818-15.616 34.909091-34.909091 34.909091S605.090909 729.088 605.090909 709.818182c0 0 69.818182-46.545455 69.818182-197.818182s-69.818182-197.818182-69.818182-197.818182C605.090909 294.912 620.706909 279.272727 640 279.272727z" p-id="1193" fill="#1296db"></path>
            <path d="M802.909091 139.636364C822.202182 139.636364 837.818182 155.275636 837.818182 174.545455c0 0 116.363636 104.727273 116.363636 337.454545s-116.363636 337.454545-116.363636 337.454545c0 19.293091-15.616 34.909091-34.909091 34.909091S768 868.747636 768 849.454545c0 0 116.363636-104.727273 116.363636-337.454545S768 174.545455 768 174.545455C768 155.275636 783.616 139.636364 802.909091 139.636364z" p-id="1194" fill="#1296db"></path>
            <path d="M209.454545 674.909091 0 674.909091 0 372.363636l209.454545 0 279.272727-209.454545 0 721.454545L209.454545 674.909091zM442.181818 256l-209.454545 162.909091L46.545455 418.909091l0 209.454545 186.181818 0 209.454545 162.909091L442.181818 256z" p-id="1195" fill="#1296db"></path>
            <path d="M965.818182 0C985.111273 0 1000.727273 15.639273 1000.727273 34.909091c0 0 162.909091 151.272727 162.909091 477.090909s-162.909091 477.090909-162.909091 477.090909c0 19.293091-15.616 34.909091-34.909091 34.909091S930.909091 1008.384 930.909091 989.090909c0 0 162.909091-151.272727 162.909091-477.090909S930.909091 34.909091 930.909091 34.909091C930.909091 15.639273 946.525091 0 965.818182 0z" p-id="1196" fill="#1296db"></path>
        </svg>
        <div class="symbol">
            <div v-html="symbolB.title"></div>
            <!-- <div id="src" ref="audioB">{{symbolB.src}}</div> -->
        </div>
    </div>

    <div id="content" v-html="content"></div>
    <div id="tips" v-if="!title">
        <h2>唔..什么都没,要不你再搜点别的？</h2>
    </div>
</div>
</template>

<script>
import {
    reactive,
    toRefs
} from "vue";
import cheerio from "cheerio";
import {
    youdaoDict
} from "../api/api";
export default {
    setup() {
        let status = reactive({
            title: "",
            symbolA: {
                title: "",
                src: ""
            },
            symbolB: {
                title: "",
                src: ""
            },
            content: "",
        });
        // core 
        let translate = (word) => {
            status.title = "";
            status.content = "";
            status.symbolA.src="";
            status.symbolA.title="";
            status.symbolB.src="";
            status.symbolB.title="";
            youdaoDict(word)
                .then((res) => {
                    let $ = cheerio.load(res.data);
                    // 句子翻译
                    if($("#fanyi > div > p.secondary").text() == "以上为机器翻译结果，长、整句建议使用有道翻译"){
                        $("#fanyi > div > p.secondary").remove();
                        status.title=$("#fanyi > div > p:nth-child(1)").text();
                        $("#fanyi > div > p:nth-child(1)").remove();
                        status.content = $("#fanyi > div").html();
                        return 
                    }
                    // zh-en
                    if($("#ec > h2 > a").text()!="纠错"){
                        status.title=$("#ce > h2").html();
                        status.content=$("#ce > ul").html();
                        return
                    }
                    // en-zh
                    status.title = $("#ec > h2 > span").html();
                    status.symbolA.title = $("#ec > h2 > div > span:nth-child(1)").html();
                    status.symbolA.src = $("#ec > h2 > div > span:nth-child(1) > a").attr(
                        "data-rel"
                    );
                    status.symbolB.title = $("#ec > h2 > div > span:nth-child(2)").html();
                    status.symbolB.src = $("#ec > h2 > div > span:nth-child(2) > a").attr(
                        "data-rel"
                    );
                    status.content = $("#ec > ul").html();
                });
        };
        // 播放音频
        let audioPlay = (src) => {
            new Audio(src ? status.symbolA.src : status.symbolB.src).play();
        };
        window.searchWord = translate;
        // 
        return {
            ...toRefs(status),
            audioPlay,
            translate
        };
    },
};
</script>

<style scoped>
* {
    text-align: left;
    margin: 0;
    padding: 0;
}

svg {
    position: relative;
    top: 8px;
    left: -10px;
    cursor: pointer;
}

#symbol {
    font-size: 10px;
    margin: 10px;
}

#title {
    margin: 0;
    padding: 0;
    font-size: 20px;
    font-weight: bolder;
}

.symbol {
    display: inline-block;
    font-size: 18px;
    margin-right: 20px;
}

#content {
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
}
</style>
